<template>
  <main>
    <h1>我是中间主体区</h1>
    <!-- 直接在img标签里使用 -->
    <img v-if="false" src="@/assets/11-27jz5158/logo.png" alt="" />
    <img v-if="false" v-bind:src="src" alt="" />
    <img v-if="false" v-bind:src="myLogo" alt="" />
    <img
      v-if="false"
      v-bind:src="require(`@/assets/11-27jz5158/logo.png`)"
      alt=""
    />
    <hr />

    <div style="display:flex;">
      <div>
        <ul style="border:2px solid red">
          <li style="border:1px solid blue;" v-on:click="index = 1">1</li>
          <li style="border:1px solid blue;" v-on:click="index = 2">2</li>
          <li style="border:1px solid blue;" v-on:click="index = 3">3</li>
          <li style="border:1px solid blue;" v-on:click="index = 4">4</li>
        </ul>
      </div>
      <div style="border:2px solid green">
        <ul>
          <li v-if="index == 1"><ZhiBIaoDaQuan></ZhiBIaoDaQuan></li>
          <li v-else-if="index == 2">2222</li>
          <li v-else-if="index == 3">3333</li>
          <li v-else>4444</li>
        </ul>
      </div>
    </div>
  </main>
</template>
<script>
import img from "@/assets/11-27jz5158/logo.png";
import ZhiBIaoDaQuan from "@/components/11-26条件渲染/下午/ZhiBIaoDaQuan";
export default {
  components: { ZhiBIaoDaQuan },
  data() {
    return {
      index: 1,
      src: img,
      myLogo: require("@/assets/11-27jz5158/logo.png"),
    };
  },
};
</script>
